<template>
  <div class="idcard">
    <div class="input-item">
      <div><span style="color: red">*</span>持卡人姓名</div>
      <div>
        <input
          type="text"
          v-model="card.cardholder_name"
          placeholder="请输入持卡人姓名"
        />
        <i class="icon iconfont icon-xiangyou"></i>
      </div>
    </div>
    <div
      class="input-item"
      @click="selectCard"
    >
      <div><span style="color: red">*</span>银行卡名称</div>
      <div>
        <input
          type="text"
          disabled
          v-model="card.bankname"
        />
        <i class="icon iconfont icon-xiangyou"></i>
      </div>
    </div>
    <div class="input-item">
      <div><span style="color: red">*</span>银行卡号</div>
      <div>
        <input
          type="text"
          v-model="card.card_no"
          placeholder="请输入银行卡号"
        />
        <i class="icon iconfont icon-xiangyou"></i>
      </div>
    </div>
    <div class="input-item">
      <div>开户地区</div>
      <div>
        <input
          type="text"
          v-model="card.open_place"
          placeholder="开户地区"
        />
      </div>
    </div>
    <div class="input-item">
      <div>开户网点</div>
      <div>
        <input
          type="text"
          v-model="card.open_net"
          placeholder="开户网点"
        />
      </div>
    </div>
    <div class="input-item">
      <div>备注</div>
      <div>
        <input
          type="text"
          v-model="card.remak"
          placeholder="备注"
        />
      </div>
    </div>

    <van-popup
      v-model="show"
      position="bottom"
      :overlay="false"
    >
      <van-picker
        show-toolbar
        title="请选择银行卡名称"
        :columns="columns"
        @cancel="onCancel"
        @confirm="onConfirm"
        @change='change'
      />
    </van-popup>
    <div class="tips">带<span>*</span>为必填字段</div>
    <div
      class="submit"
      @click="update"
      type="default"
    ><button>修改</button></div>

    <div
      class="submit"
      @click="unLink"
      type="warning"
    ><button>解除绑定</button></div>
  </div>
</template>
<script>
import { bankList,getBankcardInfo,addBankcard,delBankcard } from "../../api/user";
import { Toast } from "vant";
import VueRouter from 'vue-router'

export default {
  data() {
    return {
      columns: [],
      show: false,
      isget: false,
      card: {
        id:"",
        bankid:"",//发卡行id
        bankname:"",//发卡行名称
        cardholder_name:"",
        card_no:"",
        open_place:"",
        open_net:"",
        remak:"",

      },
      search:{
        id:0,
      }
    };
  },
  methods: {
    onConfirm(value, index) {
      this.show = false;
    },
    onCancel() {
      this.show = false;
    },
    change(Picker) {
      var bank = Picker.getValues();
      console.log(bank);
      this.card.bankname = bank[0];
    },

    selectCard() {
      this.show = true;
    },
    getData(){
      let id = this.$route.query.id
      this.search.id = id,
      this.card.id = id,
      getBankcardInfo(this.search).then(res => {
        console.log(res)
        this.card = res.data
      });

    },

    getBankType(){
      bankList().then(res => {
        if (res.status == 200) {
          this.columns = res.data;
        }else{
          Dialog.confirm({
            title: '获取银行卡出错误啦',
            message: '请截图并保存，反馈给客服吧',
            confirmButtonText:'去反馈',
            cancelButtonText:'再试试'
          }).then(() => {
            this.$router.push({
              path: "/customerService"
            });
          });
        }
      });
    },
    update() {  //添加
      if ( this.card.bankname == "" || this.card.cardholder_name == "" || this.card.card_no == "" ) {
        Toast("必填项不为空");
        return;
      }
      if(this.card.id ==""){
        Toast("请退出去重试");
        return;
      }
      addBankcard(this.card).then(res => {
        Toast(res.message);
        if(res.status == 200) {
          setTimeout(() => {
            this.$router.push({
              path: "/cardList"
            });
          }, 1800);
        }
      });
    },
    unLink(){  //解除绑定
      delBankcard(this.search).then(res => {
        Toast(res.message);
        if(res.status == 200) {
          setTimeout(() => {
            this.$router.push({
              path: "/cardList"
            });
          }, 1800);
        }
      });
    },
  },
  created() {
    this.getBankType();
    this.getData();
  }
};
</script>
<style lang="scss">
.idcard {
  width: 100%;
  padding-bottom: 48px;
  background-color: #f5f5f5;

  .input-item {
    display: flex;
    justify-content: space-between;
    display: -webkit-flex;
    align-items: center;
    padding: 0 15px;
    color: #323233;
    padding: 10px 15px;
    margin-top: 10px;
    background-color: #fff;
    input:disabled {
      background: none;
    }
    div:first-child {
      flex: 1;
      max-width: 90px;
    }
    div:last-child {
      flex: 1;
      text-align: right;
      input {
        border: none;
        outline: none;
        // max-width: 105px;
        width: 55%;
      }
      i {
        display: inline-block;
        width: 48px;
        height: 21px;
      }
      button {
        outline: none;
        border: none;
        background: none;
      }
    }
  }
  .tips {
    padding: 15px;
    span {
      color: red;
    }
    color: #323233;
  }
  .submit {
    width: 90%;
    margin: 0 auto;
    button {
      width: 100%;
      height: 40px;
      border: none;
      outline: none;
      border-radius: 5px;
      color: #fff;
      background-color: #e71434;
      margin-bottom: 10px;
    }
  }
}
</style>


